<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            box-sizing: border-box;
        }
        
        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }
        
        html,
        body {
            margin: 0;
        }
        
        html {
            background-color: #282828;
        }
        
        body {
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            color: white;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            font-family: 'Roboto', sans-serif;
            padding: 2rem;
        }
        
        .control-panel {
            box-shadow: 0 4px 12px 2px black;
            margin-bottom: 4rem;
            max-width: 30rem;
            width: 100%;
        }
        
        .control-panel input {
            color: black;
        }
        
        .action {
            border: 1px solid black;
            border-radius: 5px;
            box-shadow: 0 2px 8px 0px black;
            cursor: pointer;
            float: left;
            margin: 0 1rem 2rem 0;
            outline: 0;
            position: relative;
            -webkit-transition: 100ms;
            transition: 100ms;
        }
        
        .action:after {
            bottom: 0;
            content: '';
            display: block;
            height: 100%;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
        }
        
        .action:hover,
        .action.active {
            border: 1px solid #fdffad;
            box-shadow: 0 0 6px 1px #fdffad;
        }
        
        .action:last-child {
            margin-right: 0;
        }
        
        .action-internal {
            background: transparent;
            border-radius: 5px;
            box-sizing: content-box;
            color: white;
            font-size: 1.2em;
            height: 5rem;
            overflow: hidden;
            position: relative;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            width: 5rem;
        }
        
        .action-internal:after {
            box-shadow: 0 34px 16px -16px rgba(255, 255, 255, 0.4) inset;
            bottom: 0;
            content: '';
            display: block;
            height: 100%;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
        }
        
        .action-internal:before {
            bottom: 0;
            box-shadow: 0 1px 1px -1px white inset, 0 2px 1px 0px rgba(255, 255, 255, 0.4) inset, 0 -1px 2px -1px rgba(255, 255, 255, 0.4) inset;
            content: '';
            display: block;
            height: 100%;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
        }
        
        .action-internal .contents {
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            height: 100%;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            width: 100%;
        }
        
        .action-internal .contents img {
            display: block;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        
        .action-internal canvas {
            left: 50%;
            position: absolute;
            top: 50%;
            z-index: 2;
        }
        
        .action-internal:last-child {
            margin-right: 0;
        }
        
        .panel-header {
            background-color: #5d5d5d;
            background: -webkit-linear-gradient(top, #5d5d5d, #292929);
            background: linear-gradient(to bottom, #5d5d5d, #292929);
            border-radius: 6px 6px 0 0;
            overflow: hidden;
            padding: 0.75rem 1rem 0.75rem 1rem;
            position: relative;
        }
        
        .panel-header h3 {
            font-family: 'Roboto Condensed', sans-serif;
            font-size: 20px;
            font-weight: 400;
            line-height: 1;
            margin: 0;
            position: relative;
            z-index: 2;
        }
        
        .panel-header:after {
            background-color: #50614d;
            background: -webkit-linear-gradient(left, #50614d, #435c40, transparent 60%);
            background: linear-gradient(to right, #50614d, #435c40, transparent 60%);
            bottom: 0;
            box-shadow: 0 5px 5px -5px white inset;
            content: '';
            height: 100%;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
        }
        
        .panel-body {
            background: -webkit-linear-gradient(top, #212121, #151815);
            background: linear-gradient(to bottom, #212121, #151815);
            padding: 1.25rem 1rem 1.25rem;
        }
        
        .option {
            display: table;
            font-size: 15px;
            width: 100%;
            margin-bottom: 1rem;
        }
        
        .option .label {
            display: table-cell;
            vertical-align: middle;
            width: 9rem;
        }
        
        .option .input {
            display: table-cell;
            vertical-align: middle;
        }
        
        .option:last-child {
            margin-bottom: 0;
        }
        
        .option input[type="text"] {
            color: white;
            font-size: 15px;
            padding: 0.25rem;
            width: 4rem;
        }
        
        .option .unit {
            font-size: 13px;
            padding-left: 0.25rem;
        }
        
        .option input {
            background-color: #070705;
            border: 2px solid #2a2a27;
            font-family: 'Roboto', sans-serif;
            outline-color: #fdffad;
        }
        
        .key {
            font: 700 1.4em 'Roboto Condensed', sans-serif;
            left: 0.75rem;
            position: absolute;
            text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
            top: -0.8rem;
            z-index: 3;
        }
    </style>
</head>

<body>
    <div class="control-panel">
        <div class="panel-header">
            <h3>Customize</h3>
        </div>
        <div class="panel-body">
            <div class="option">
                <div class="label">
                    <label for="cooldown-length">Cooldown duration</label>
                </div>

                <div class="input">
                    <input type="text" id="cooldown-length" value="1500" tabindex="0"> <span class="unit">milliseconds</span>
                </div>

            </div>
            <div class="option">
                <div class="label">
                    <label for="global-cooldown">Global Cooldown</label>
                </div>

                <div class="input">
                    <input type="checkbox" id="gcd" tabindex="1">
                </div>

            </div>
        </div>
    </div>

    <div class="actions">

        <div class="action" data-keybind="1" id="action-1">
            <div class="key">1</div>
            <div class="action-internal">
                <div class="contents">
                    <img src="https://alwaysdev.net/images/fireball-small.jpg" alt="">
                </div>
                <canvas class="status"></canvas>
            </div>
        </div>

        <div class="action" data-keybind="2" id="action-2">
            <div class="key">2</div>
            <div class="action-internal">
                <div class="contents">
                    <img src="https://alwaysdev.net/images/fireball-2-small.jpg" alt="">
                </div>
                <canvas class="status"></canvas>
            </div>
        </div>

        <div class="action" data-keybind="3" id="action-3">
            <div class="key">3</div>
            <div class="action-internal">
                <div class="contents">
                    <img src="https://alwaysdev.net/images/color-small.jpg" alt="">
                </div>
                <canvas class="status"></canvas>
            </div>
        </div>

        <div class="action" data-keybind="4" id="action-4">
            <div class="key">4</div>
            <div class="action-internal">
                <div class="contents">
                    <img src="https://alwaysdev.net/images/icebolt-small.jpg" alt="">
                </div>
                <canvas class="status"></canvas>
            </div>
        </div>

        <div class="action" data-keybind="5" id="action-5">
            <div class="key">5</div>
            <div class="action-internal">
                <div class="contents">
                    <img src="https://alwaysdev.net/images/lightning-small.jpg" alt="">
                </div>
                <canvas class="status"></canvas>
            </div>
        </div>

    </div>

    <script>
        var actions = document.querySelectorAll('.action');
        var actionObjs = [];
        var cd;
        var gcd = document.querySelector('#gcd');

        // Request animationFrame

        window.requestAnimationFrame = (function() {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback) {
                    window.setTimeout(callback, 1000 / 60);
                };
        })();

        function Cooldown(el) {

            this.canvas = el.querySelector('canvas');
            this.cd = cd;
            this.ctx = this.canvas.getContext('2d');
            this.element = el;
            this.keybind = el.getAttribute('data-keybind');
            this.timer;
            this.timerStart;

            this.clearCanvas = function() {
                this.ctx.setTransform(1, 0, 0, 1, 0, 0);
                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
            };

            this.endCooldown = function() {
                this.clearCanvas();
                this.timer = null;

                var canvas = this.canvas;
                var ctx = this.canvas.getContext('2d');
                ctx.fillStyle = 'rgba(253, 255, 173, 0.5)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                window.setTimeout(function() {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                }, 20);
            };

            this.gaugeCooldown = function() {
                if (!this.timer) {
                    if (gcd.checked) {
                        Array.prototype.forEach.call(actionObjs, function(el, i) {
                            if (!actionObjs[i].timer) {
                                actionObjs[i].initiateCooldown();
                            }
                        });
                    } else {
                        this.initiateCooldown();
                    }
                }
            };

            this.initiateCooldown = function() {
                this.cd = document.querySelector('#cooldown-length').value;
                if (!this.timer) {
                    this.timer = window.setTimeout(this.endCooldown.bind(this), this.cd);
                    this.timerStart = (new Date()).getTime();
                    this.runCooldown();
                }
            };

            this.runCooldown = function() {
                if (this.timer) {
                    var timeElapsed = (new Date()).getTime() - this.timerStart;
                    var timeElapsedPercentage = timeElapsed / this.cd;
                    var degrees = 360 * timeElapsedPercentage;

                    var canvas = this.canvas;
                    var ctx = this.canvas.getContext('2d');
                    var hypoteneuse = Math.sqrt(Math.pow(this.element.clientWidth, 2) + Math.pow(this.element.clientHeight, 2));
                    ctx.setTransform(1, 0, 0, 1, 0, 0);
                    ctx.clearRect(0, 0, canvas.width, canvas.height);

                    canvas.height = hypoteneuse;
                    canvas.width = hypoteneuse;

                    canvas.style.marginLeft = -hypoteneuse / 2 + "px";
                    canvas.style.marginTop = -hypoteneuse / 2 + "px";

                    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';

                    ctx.translate(canvas.width / 2, canvas.height / 2);
                    ctx.rotate(-Math.PI / 2);

                    ctx.beginPath();
                    ctx.moveTo(0, 0);
                    ctx.lineTo((hypoteneuse / 2) * Math.cos(0).toFixed(15), (hypoteneuse / 2) * Math.sin(0).toFixed(15));
                    ctx.lineWidth = 2;
                    ctx.strokeStyle = 'rgba(255, 255, 255, 0.9)';

                    ctx.shadowColor = 'rgba(255, 255, 255, 0.6)';
                    ctx.shadowBlur = 10;

                    ctx.stroke();
                    ctx.moveTo(0, 0);
                    ctx.lineTo((hypoteneuse / 2) * Math.cos(degrees * Math.PI / 180).toFixed(15), (hypoteneuse / 2) * Math.sin(degrees * Math.PI / 180).toFixed(15));
                    ctx.stroke();

                    ctx.shadowColor = null;
                    ctx.shadowBlur = null;

                    ctx.arc(0, 0, hypoteneuse / 2, degrees * Math.PI / 180, Math.PI * 2, false);
                    ctx.fill();
                    ctx.closePath();

                    requestAnimationFrame(this.runCooldown.bind(this));
                }
            };
        }

        Array.prototype.forEach.call(actions, function(el, i) {
            var action = new Cooldown(el);
            actionObjs.push(action);

            el.addEventListener('click', function() {
                action.gaugeCooldown();
            });
        });

        /*  Keybindings  */

        document.addEventListener('keydown', function(event) {
            var hotkeyValue = String.fromCharCode(event.keyCode);
            if (document.querySelector('#cooldown-length') != document.activeElement) {
                Array.prototype.forEach.call(actionObjs, function(el, i) {
                    if (actionObjs[i].keybind === hotkeyValue) {
                        actionObjs[i].element.classList.add('active');
                        window.setTimeout(function() {
                            actionObjs[i].element.classList.remove('active');
                        }, 100);
                        actionObjs[i].gaugeCooldown();
                    }
                });
            }
        });

        window.addEventListener('load', function() {
            FastClick.attach(document.body);
        }, false);
    </script>
</body>

</html>